<!--
 * @Date: 2024-11-19 13:58:38
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-11-19 14:36:15
 * @Description: 下拉树选择器
-->
<template>
  <LayoutFull
    :enableAside="false"
    :enableHeader="false"
  >
    <template #main>
      <el-form :label-width="150" class="form-wrapper">
        <el-divider content-position="left">【下拉树-基础数据】</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="模式一">
              <RkTreeSelect
                :="treeAttrs.base1"
                v-model="treeBaseState.mode1.value"
                v-model:label="treeBaseState.mode1.label"
              />
            </el-form-item>
            <el-form-item label="label">
              <el-input v-model="treeBaseState.mode1.label" />
            </el-form-item>
            <el-form-item label="value">
              <el-input v-model="treeBaseState.mode1.value" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模式二">
              <RkTreeSelect
                :="treeAttrs.base2"
                v-model="treeBaseState.mode2.value"
                v-model:label="treeBaseState.mode2.label"
              />
            </el-form-item>
            <el-form-item label="label">
              <el-input v-model="treeBaseState.mode2.label" />
            </el-form-item>
            <el-form-item label="value">
              <el-input v-model="treeBaseState.mode2.value" />
            </el-form-item>
            
          </el-col>
        </el-row>

        <el-divider content-position="left">【下拉树-动态数据】</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="模式一">
              <RkTreeSelect
                v-model="treeServeState.mode1.value"
                v-model:label="treeServeState.mode1.label"
                :="treeAttrs.serve1"
              >
              </RkTreeSelect>
            </el-form-item>
            <el-form-item label="label">
              <el-input v-model="treeServeState.mode1.label" />
            </el-form-item>
            <el-form-item label="value">
              <el-input v-model="treeServeState.mode1.value" />
            </el-form-item>
            
          </el-col>
          <el-col :span="6">
            <el-form-item label="模式二">
              <RkTreeSelect
                v-model="treeServeState.mode2.value"
                v-model:label="treeServeState.mode2.label"
                :="treeAttrs.serve2"
              >
              </RkTreeSelect>
            </el-form-item>
            <el-form-item label="label">
              <el-input v-model="treeServeState.mode2.label" />
            </el-form-item>
            <el-form-item label="value">
              <el-input v-model="treeServeState.mode2.value" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">【下拉树-枚举数据、静态数据】</el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="下拉树（静态数据）">
              <RkTreeSelect
                v-model="treeStaticState.mode1.value"
                v-model:label="treeStaticState.mode1.label"
                :="treeAttrs.static1"
              >
              </RkTreeSelect>
            </el-form-item>
            <el-form-item label="label">
              <el-input v-model="treeStaticState.mode1.label" />
            </el-form-item>
            <el-form-item label="value">
              <el-input v-model="treeStaticState.mode1.value" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下拉树（枚举数据）">
              <RkTreeSelect
                v-model="treeStaticState.mode2.value"
                v-model:label="treeStaticState.mode2.label"
                :="treeAttrs.static2"
              >
              </RkTreeSelect>
            </el-form-item>
            <el-form-item label="label">
              <el-input v-model="treeStaticState.mode2.label" />
            </el-form-item>
            <el-form-item label="value">
              <el-input v-model="treeStaticState.mode2.value" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </LayoutFull>
</template>

<script setup>
import { reactive } from 'vue';
import { useTreeApi } from '@/api/tree';
import { useUserStore } from '@/stores/modules';


const userInfo = useUserStore().userInfo;

const selectServer = () => {
  return new Promise((reslove) => {
		useTreeApi().getSysAgData({
      agId: null,
      adCode: userInfo.adBjCode,
    })
    .then((res) => {
      const { code, msg, data } = res;
      if (code === 200) {
        reslove(data);
      } else {
        console.error(msg);
        reslove([]);
      }
    })
    .catch((err) => {
      console.error(err);
      reslove([]);
    });
	});
}

const treeAttrs = reactive({
  base1: {
    dist: { 
      name: 'DSY_V_ELE_ITEM',
      // params: { condition: `AND T1.YEAR = '2023'` }
    },
    filterable: false,
  },
  base2: {
    dist: { 
      name: 'DSY_V_ELE_XMLB',
      params: { condition: `AND CODE LIKE '3%'` },
    },
    filterable: false,
  },
  serve1: {
    props: { label: 'name', value: 'id', code: 'code' },
    server: selectServer,
    placeholder: '请选择单位',
  },
  serve2: {
    props: { label: 'name', value: 'id', code: 'code' },
    server: {
      url: '/dict/getSysAdata',
      method: 'post',
      data: { adCode: userInfo.adCode },
    },
    placeholder: '请选择单位',
  },
  static1: {
    data: [
      {
        value: '1',
        label: 'Level one 1',
        children: [],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '2-1',
            label: 'Level two 2-1',
            children: [
              {
                value: '2-1-1',
                label: 'Level three 2-1-1',
              },
            ],
          },
        ],
      },
    ],
    showCode: false
  },
  static2: {
    enum: 'EXPERT_INPUT_STATUS',
    showCode: true
  }
})

const treeBaseState = reactive({
  mode1: {
    value: '',
    label: ''
  },
  mode2: {
    value: '',
    label: ''
  }
})
const treeServeState = reactive({
  mode1: {
    value: '',
    label: ''
  },
  mode2: {
    value: '',
    label: ''
  }
})
const treeStaticState = reactive({
  mode1: {
    value: '',
    label: ''
  },
  mode2: {
    value: '',
    label: ''
  }
})


</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 100%;
  padding-top: 20px;
}
</style>